<template>
  <div class="m-menu">
    <dl
      class="nav"
      @mouseleave="mouseleave"
    >
      <dt>全部分类</dt>
      <dd
        v-for="(item,idx) in $store.state.home.menu"
        :key="idx"
        @mouseenter="enter($event)"
      >
        <i :class="item.type" />{{ item.name }}<span class="arrow" />
      </dd>
    </dl>
    <div
      v-if="kind"
      class="detail"
      @mouseenter="sover"
      @mouseleave="sout"
    >
      <template v-for="(item,idx) in curdetail.child">
        <h4 :key="idx">{{ item.title }}</h4>
        <span
          v-for="v in item.child"
          :key="v"
        >{{ v }}</span>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      kind: '', //记录鼠标移动到当前menu的状态
      menu: []
    }
  },
  computed: {
    curdetail() {
      //注意修改menu后这里的curdetail也应该修改
      //否则的话这里 menu还是使用老的数据
      return this.$store.state.home.menu.filter(item => {
        return this.kind === item.type
      })[0]
    }
  },
  methods: {
    mouseleave() {
      let self = this
      //这里加上定时器
      this.timer = setTimeout(() => {
        self.kind = ''
      }, 150)
    },
    enter(e) {
      //这里应该根据kind值进行渲染对应的列表
      this.kind = e.target.querySelector('i').className
    },
    sover() {
      clearTimeout(this.timer)
    },
    sout() {
      this.kind = ''
    }
  }
}
</script>
